<template>
    <Modal :mask-closable="false"
            v-model="deviceVisible"
            title="添加保养物料"
            width="1000"
            class="modal-content-layout"
    >
<!--        <Form ref="useGoodsForm" :model="formTop" label-position="top" :rules="validateDevice">-->
<!--            <Row :gutter="16">-->
<!--                <Col :span="12">-->
<!--                    <FormItem label="物料代码" prop="materialCode" required>-->
<!--                        <Select-->
<!--                                v-model="formTop.materialCode"-->
<!--                                filterable-->
<!--                                clearable-->
<!--                                :remote-method="handleRemote"-->
<!--                                :loading="searchLoading"-->
<!--                                style="width:200px"-->
<!--                                @on-select="handleChangeWl"-->
<!--                        >-->
<!--                            <Option v-for="item in numberList" :value="item.maCode" :key="item.maCode">{{ item.maCode }}</Option>-->
<!--                        </Select>-->
<!--                    </FormItem>-->
<!--                </Col>-->
<!--                <Col :span="12">-->
<!--                    <FormItem label="物料名称" prop="materialName" required>-->
<!--                        <Input v-model="formTop.materialName" clearable/>-->
<!--                    </FormItem>-->
<!--                </Col>-->
<!--            </Row>-->
<!--            <Row :gutter="16">-->
<!--                <Col :span="12">-->
<!--                    <FormItem label="规格型号" prop="materialModel" required>-->
<!--                        <Input v-model="formTop.materialModel" clearable/>-->
<!--                    </FormItem>-->
<!--                </Col>-->
<!--                <Col :span="12">-->
<!--                    <FormItem label="单价" prop="unitPrice">-->
<!--                        <Input v-model="formTop.unitPrice" clearable/>-->
<!--                    </FormItem>-->
<!--                </Col>-->
<!--            </Row>-->
<!--            <Row :gutter="16">-->
<!--                <Col :span="12">-->
<!--                    <FormItem label="使用数量" prop="num">-->
<!--                        <Input v-model="formTop.num" style="width: 100px;" clearable/>-->
<!--&lt;!&ndash;                        库存数量: {{ formTop.stockNum }}&ndash;&gt;-->
<!--                    </FormItem>-->
<!--                </Col>-->
<!--            </Row>-->
<!--        </Form>-->
        <Form :label-width="100" class="search-form">
            <Row>
                <Col :span="span">
                    <FormItem label="物料代码：">
                        <Input type="text" v-model="searchParams.maCode" clearable :placeholder="`${$t('common.inputInfo')}`"class="inputBorder" :maxlength="32"></Input>
                    </FormItem>
                </Col>
                <Col :span="span">
                    <FormItem label="物料名称：">
                        <Input type="text" v-model="searchParams.maName" clearable :placeholder="`${$t('common.inputInfo')}`" class="inputBorder" :maxlength="32"></Input>
                    </FormItem>
                </Col>
                <Col :span="span" align="center">
                    <Button type="primary" @click="changeNum">{{$t('common.Query')}}</Button>
                </Col>
            </Row>
        </Form>
        <div class="tableContent">
            <Table class="recycleBinTable" ellipsis ref="selection" :columns="columns" :data="data"  @on-selection-change="onSelectChange">
            </Table>
        </div>
        <div class="pageWrap">
            <Page :total="total" :page-size="pageSize" :page-size-opts="$variable.pageSizes" :current="pageNum" @on-change="changePageNum" @on-page-size-change="changePageSize" show-sizer show-total />
        </div>
        <div slot="footer">
            <Button type="default" @click="handleCancel">{{$t('common.Cancle')}}</Button>
            <Button type="primary" :loading="loadingVisible" @click="handleOk">{{$t('maintenance.Confirmed')}}</Button>
        </div>
    </Modal>
</template>

<script>
    export default {
        name: "useGoodsModal",
        data() {
            return {
                deviceVisible: false,
                loadingVisible: false,
                searchLoading: false,
                pageNum:1,
                pageSize:10,
                total:0,
                pageSizeOption: [10,20,30,40],
                span: 6,
                searchParams: {},
                formTop: {
                    materialCode: '',
                    materialName: '',
                    materialModel: '',
                    unitPrice: 0,
                    num: '',
                    stockNum: 0,
                },
                validateDevice: {
                    materialCode: [
                        { required: true, message: '请选择物料代码', trigger: 'change' }
                    ],
                    materialName: [
                        { required: true, message: '请输入物料名称', trigger: 'blur' }
                    ],
                    materialModel: [
                        { required: true, message: '请输入规格型号', trigger: 'blur' }
                    ],
                },
                numberList: [],
                columns: [
                    {
                        type: 'selection',
                        width: 60,
                        align: 'center'
                    },
                    {
                        title: '物料代码',
                        key: 'maCode'
                    },
                    {
                        title: '物料名称',
                        key: 'maName'
                    },
                    {
                        title: `${ this.$t('equipCheck.Model') }`,
                        key: 'maModel'
                    },
                    {
                        title: '单价',
                        key: 'maPrice'
                    },
                ],
                data: [],
                selectData: []
            }
        },
        watch: {
            formTop: {
                handler(val) {
                    console.log(val)
                    // this.$nextTick(() => {
                    //     this.getStockNum(this.formTop.maCode, this.workorderNo)
                    // })
                },
                deep: true
            }
        },
        methods: {
            show() {
                this.deviceVisible = true
                this.selectData = []
                this.formTop = {}
                this.searchList()
            },
            handleRemote(query) {
                console.log(query, this.formTop.materialCode)
                if (query !== '') {
                    this.searchLoading = true;
                    this.axios({
                        method: 'get',
                        url: '/workorder/workorderTool/wlList',
                        params: {
                            maCode: query,
                        }
                    }).then(res => {
                        
                        if (res.code === 200) {
                            this.numberList = res.data
                        }else {
                            this.$Message.warning(({content:res.msg,duration:6,closable:true}))
                        }
                    }).finally(() => {
                        this.searchLoading = false
                    })
                } else {
                    this.numberList = [];
                }
            },
            async handleChangeWl(val) {
                console.log(val)
                console.log(this.numberList)
                let arr = this.numberList.length ? this.numberList.filter(item => item.maCode === val.value) : []
                console.log(arr)
                this.formTop = {
                    materialCode: arr[0].maCode,
                    materialModel: arr[0].maModel,
                    materialName: arr[0].maName,
                    unitPrice: arr[0].maPrice
                }
                await this.getStockNum(val.value, '')
            },
            getStockNum(key,workorderNo) {
                this.axios({
                    method: 'get',
                    url: '/workorder/customJco/executeJcoFunction',
                    params: {
                        key,
                        workorderNo
                    }
                }).then(res => {
                    
                    if (res.code === 200) {
                        this.$nextTick(() => {
                            this.formTop = {
                                ...this.formTop,
                                stockNum: res.data
                            }
                            console.log(this.formTop)
                        })


                    }else {
                        this.$Message.warning(({content:res.msg,duration:6,closable:true}))
                    }
                })
            },
            handleChangeUseNum(event) {
                console.log(event.target.value)
                let val = event.target.value
                if (parseInt(val) < parseInt(this.formTop.stockNum)) {
                    this.formTop.purchaseNum = 0
                }else {
                    this.formTop.purchaseNum = parseInt(val) - parseInt(this.formTop.stockNum)
                }
            },
            onSelectChange(data) {
                console.log(data)
                this.selectData = [...data]
            },
            //分页
            changeNum(){
                this.pageNum = 1;
                this.searchList();
            },
            changePageSize(pageSize) {
                this.pageSize = pageSize;
                this.searchList();
            },
            changePageNum(val){
                this.pageNum = val;
                this.searchList();
            },
            searchList(){//查询列表
                let params = {
                    pageNo: this.pageNum,
                    pageSize: this.pageSize,
                };
                for (let key in this.searchParams) {
                    if (this.searchParams[key]) {
                        this.$set(params, key, this.searchParams[key])
                    }
                }
                // if(this.searchParams.status==3){
                //   params.status = 0
                // }
                // if(this.dateList[1]){
                //     params.startTime = this.$moment(this.dateList[0]).format('YYYY-MM-DD');
                //     params.endTime = this.$moment(this.dateList[1]).format('YYYY-MM-DD');
                // }
                this.axios({
                    method: 'get',
                    url: '/workorder/workorderTool/queryWlList',
                    params: params
                }).then(res => {
                    if(res.code === 200){
                        this.data = res.data.record.map(item => {
                            return {
                                ...item,
                                isEdit: false
                            }
                        })
                        this.total = res.data.total
                    }else{
                        this.$Message.warning(({content:res.msg,duration:6,closable:true}));
                    }
                })
            },
            handleCancel() {
                this.deviceVisible = false
            },
            handleOk() {
                if(!this.selectData.length) {
                    this.$Message.warning(({content:'请任意选择数据！',duration:6,closable:true}))
                    return false
                }
                this.deviceVisible = false
                let arr = this.selectData.map(item => {
                    return {
                        ...item,
                        num: 0,
                        totalPrice: Number(item.num ? item.num : 0) * Number(item.maPrice),
                        isEdit: false
                    }
                })
                this.$emit('handleUseGoodsOk', arr)
                // this.$refs.useGoodsForm.validate((valid) => {
                //     if (valid) {
                //         let totalPrice = Number(this.formTop.num) * Number(this.formTop.unitPrice)
                //         this.formTop.totalPrice = totalPrice
                //         this.deviceVisible = false
                //         this.$emit('handleUseGoodsOk', this.formTop)
                //     }
                // })
            },
        }
    }
</script>

<style scoped>

</style>
